<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul,
    li {
        list-style: none;
        padding: 0;
        cursor: pointer;
    }

    .yi {
        position: absolute;
        left: 50px;
    }

    .yi>li {
        position: relative;
    }

    .yi ul {
        position: absolute;
        left: 200px;
        top: 0;
    }

    .er>li {
        position: relative;
    }

    .er ul {
        position: absolute;
        left: 200px;
        top: 0;
    }

    li {
        /*height: 50px;*/
        width: 200px;
        border: 1px solid grey;
        text-align: center;
        line-height: 50px;
        color: white;
        background-color: black;
    }

    .san,
    .er {
        display: none;
    }
</style>

<body>
    <div class="box">
        <ul class="yi">
            <li>首页
                <ul class="er">
                    <li>我是首页下的第一个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是首页下的第二个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是首页下的第三个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>内容
                <ul class="er">
                    <li>我是内容下的第一个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是内容下的第二个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是内容下的第三个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>社区
                <ul class="er">
                    <li>我是社区下的第一个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是社区下的第二个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是社区下的第三个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>体育
                <ul class="er">
                    <li>我是体育下的第一个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是体育下的第二个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是体育下的第三个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>美食
                <ul class="er">
                    <li>我是美食下的第一个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是美食下的第二个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                    <li>我是美食下的第三个内容
                        <ul class="san">
                            <li>第一个内容</li>
                            <li>第二个内容</li>
                            <li>第三个内容</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

</body>
<script>
    // 一级
    $('.yi').children('li').mouseenter(function () {
        $(this).children('.er').stop().show(500).parent().siblings().children('ul').stop().hide(500)
        $('.san').stop().hide(500)
        $(this).css('background-color', 'red')
    })
    $('.yi').children('li').mouseout(function () {
        $(this).css('background-color', 'black')
    })
    // 二级
    $('.er').children('li').mouseenter(function () {
        $(this).children('ul').stop().show(500).parent().siblings().children('ul').stop().hide(500)
        $(this).css('background-color', 'red')
        $(this).parent().parent()
            .css('background-color', 'black')
    })
    $('.er').children().mouseout(function () {
        $(this).css('background-color', 'black')
    })
    // 三级
    $('.san').children('li').mouseenter(function () {
        $(this).css('background-color', 'red')
        $(this).parent().parent()
        $(this).parent().parent().parent(), parent()
    })
    $('.san').children().mouseout(function () {
        $(this).css('background-color', 'black')
    })

</script>

</html>